<script setup lang="ts">
  import { ref, onMounted, inject } from 'vue'
  import {sexList, eventLevel, clothesSize, matchType, rigGroup, signUpClearance} from '@/utils/basicData'
  import switchRadio from '@/components/switchRadio/suitchRadio.vue'
  import inputNumber from '@/components/inputNumber/inputNumber.vue'
  import selectPicker from '@/components/selectPicker/index.vue'
  import {
    getCityData,
  } from '@/api/basisData'
  import uploadImage from '@/components/uploadImage/index.vue'
  import { getTeamGroup, getInstitution } from '@/api/match'
  const $emit = defineEmits(['change'])
  const props = defineProps({
    info:{
      type:Object
    },
    mechanism:{
      type:Boolean,
      default:false
    }
  })
  const qualificationDocuments = ref([])
  const signFrom = ref(props.info)
  const $Prefix = inject('$Prefix')


  const teamGroup = ref([])
  const cityList = ref([])
  const institutionList = ref([])
  onMounted(() => {
    getCityData().then(res => {
      if(res.code == 200){
        cityList.value = res.data
		console.log(cityList.value)
      }else{
        cityList.value = []
      }
    }).catch(err => {
      cityList.value = []
    })
    // 获取球队名称
    getTeamGroup().then(res => {
      if(res.code == 200){
        teamGroup.value = res.data.map((item:any,index:any) => {
          return  {
            value:index,
            text:item
          }
        })
      }
    })
	
	// 获取机构
	getInstitution().then(res => {
	  if(res.code == 200){
	    institutionList.value = res.data.map((item:any) => {
	      return  {
	        value:item.insCode,
	        text:item.insName
	      }
	    })
	  }
	})
  })
  
  const imgShow = ref(false)
  // 打开尺码表弹窗
  const openSize = () => {
	  imgShow.value =true
  }
  
  const change = (type:any, e:any) => {
	  if (type === 'isCode') {
		  institutionList.value.find()((item:any) => {
		    return  {
		      value:item.insCode,
		      text:item.insName
		    }
		  })
		  $emit('change',{value: e,text: e,type})
	  } else {
		  $emit('change',{...e,type})
	  }
  }
  
</script>

<template>
	<view class="sign-body">
		<view class="sign-item">
		  <view class="sign-label required">报名组别</view>
		  <view class="sign-value">
			  <uni-data-select
				  v-model="signFrom.rigGroup"
				  :localdata="rigGroup"
				  placeholder="请选择报名组别"
				></uni-data-select>
		    <!-- <select-picker :columns="rigGroup" v-model="signFrom.rigGroup"/> -->
		  </view>
		</view>
		<view class="sign-item">
		   <view class="sign-label required">参赛层级</view>
		   <view class="sign-value">
			   <uni-data-select
				  v-model="signFrom.eventLevel"
				  :localdata="eventLevel"
				  placeholder="请选择参赛层级"
				></uni-data-select>
		     <!-- <select-picker :columns="eventLevel" v-model="signFrom.eventLevel"/> -->
		   </view>
		 </view>
		<view class="sign-item">
		  <view class="sign-label required">球队名称</view>
		  <view class="sign-value">
			<uni-data-select
				  v-model="signFrom.teamName"
				  :localdata="teamGroup"
				   placeholder="请选择球队名称"
				></uni-data-select>
			<!-- <select-picker :columns="teamGroup" v-model="signFrom.teamName"  placeholder="请选择球队名称"/> -->
		  </view>
		</view>
		<view class="sign-item">
		  <view class="sign-label">新增球队</view>
		  <view class="sign-value">
			<input @blur="change('teamName1',$event)"  type="text" v-model="signFrom.teamName1" placeholder-class="placeholder-class"  placeholder="如无球队选项，请输入球队名称"/>
		  </view>
		</view>
		<view class="sign-item">
		  <view class="sign-label">机构</view>
		  <view class="sign-value">
			<uni-data-select
				  v-model="signFrom.insCode"
				  :localdata="institutionList"
				   placeholder="请选择机构"
				   @change="change('insCode',signFrom.insCode)"
			></uni-data-select>
			<!-- <select-picker @change="change('insCode',$event)" type="obj" :columns="institutionList" v-model="signFrom.insCode"  placeholder="请选择机构"/> -->
		  </view>
		</view>
		<!-- <view class="sign-item">
		  <view class="sign-label">赛事类型</view>
		  <view class="sign-value">
			<select-picker :columns="matchType" v-model="signFrom.eventType"/>
		  </view>
		</view> -->
	</view>
  <view class="sign-body">
    <view class="sign-item">
      <view class="sign-label required">姓名</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.competeName"  placeholder="请输入姓名"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label required">性别</view>
      <view class="sign-value">
        <switch-radio v-model="signFrom.sex" :list="sexList"/>
      </view>
    </view>
	<view class="sign-item">
	  <view class="sign-label required">年龄</view>
	  <view class="sign-value">
	    <input type="text" v-model="signFrom.age"  placeholder="请输入年龄"/>
	  </view>
	</view>
    <view class="sign-item">
      <view class="sign-label required">身份证</view>
      <view class="sign-value">
        <input type="idcard" v-model="signFrom.idCard" placeholder="请输入身份证"/>
      </view>
    </view>
    <view class="sign-item center">
      <view class="sign-label required">身高(cm)</view>
      <view class="sign-value">
        <input-number v-model="signFrom.height" unit="cm" :negative="true"/>
      </view>
    </view>

    <view class="sign-item center">
      <view class="sign-label required">体重(kg)</view>
      <view class="sign-value">
        <input-number v-model="signFrom.weight" unit="kg" :negative="true"/>
      </view>
    </view>
   
    <view class="sign-item">
      <view class="sign-label required">衣服尺码</view>
	  <view class="sign-value">
		 <input type="text" v-model="signFrom.clothingSize"  placeholder="请输入衣服尺码"/>
	  </view>
    </view>
	<view class="check-btn" @click="openSize">查看尺码表</view>
    <view class="sign-item">
      <view class="sign-label required">球员号码</view>
	  <view class="sign-value">
	    <input type="text" v-model="signFrom.uniformNumber"  placeholder="请输入球员号码"/>
	  </view>
    </view>
  </view>
  <view class="sign-body">
    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">联系电话</view>
      <view class="sign-value">
        <input type="number" v-model="signFrom.phone" placeholder="请输入联系电话"/>
      </view>
    </view>
    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">紧急联系人</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.emContact"  placeholder="请输入紧急联系人"/>
      </view>
    </view>

    <view class="sign-item">
      <view class="sign-label" :class="{required:!mechanism}">紧急电话</view>
      <view class="sign-value">
        <input type="number" v-model="signFrom.emPhone" placeholder="请输入紧急联系电话"/>
      </view>
    </view>
	<view class="sign-item">
	  <view class="sign-label required">报名类型</view>
	  <view class="sign-value">
		<uni-data-select
			  v-model="signFrom.rigType"
			  :localdata="signUpClearance"
			   placeholder="请选择报名类型"
		></uni-data-select>
	    <!-- <select-picker :columns="signUpClearance" v-model="signFrom.rigType"/> -->
	  </view>
	</view>
	<view class="sign-item">
	  <view class="sign-label required">个人照片</view>
	  <view class="sign-value">
		<upload-image :max-count="1" v-model="signFrom.photo"/>
	  </view>
	</view>
  </view>
  <view class="sign-body">
    <view class="sign-item">
      <view class="sign-label required">所在城市</view>
      <view class="sign-value">
        <select-picker :cascade="true" :map="{text:'name',
        value:'code'}" v-model="signFrom.cityId" @change="change('cityId',$event)" :columns="cityList"/>
      </view>
    </view>
    <!-- <view class="sign-item start-item">
      <view class="sign-label required">详细地址</view>
      <view class="sign-value">
        <textarea v-model="signFrom.address"></textarea>
      </view>
    </view>
    <view class="sign-item start-item">
      <view class="sign-label">个人荣誉</view>
      <view class="sign-value">
        <textarea v-model="signFrom.personalHonor" placeholder-class="placeholder-class" placeholder="曾参加比赛及名称，如有请填写"></textarea>
      </view>
    </view> -->
<!--    <view class="sign-tip"></view>-->
  </view>
  <view class="sign-body" >
  <!-- <view class="sign-body" v-if="!mechanism"> -->
   <!-- <view class="sign-item">
      <view class="sign-label">推荐教练</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.recommendedCoach" placeholder-class="placeholder-class"  placeholder="如有推荐教练，请填写推荐教练"/>
      </view>
    </view> -->
    <view class="sign-item">
      <view class="sign-label">推荐单位</view>
      <view class="sign-value">
        <input type="text" v-model="signFrom.reUnits" placeholder-class="placeholder-class"  placeholder="如有推荐单位，请填写推荐单位"/>
      </view>
    </view>
  </view>
  
  <up-overlay :show="imgShow" @click="imgShow = false">
  		<view class="warp">
  			<view class="rect" @tap.stop>
				<image class="size-img" :src="`${$Prefix}/mini/static/icons/chima.png`" mode="widthFix"/>
			</view>
  		</view>
  	</up-overlay>
</template>

<style scoped lang="scss">
  .sign-body{
    margin: 32rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 0 32rpx;
    .sign-item{
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F5F5F5;
      &.start-item{
        align-items: flex-start;
      }
      &:last-child{
        border-bottom: none;
      }
      .sign-label{
        color: #505363;
        font-size: 28rpx;
        width: 160rpx;
        &.required{
          position: relative;
          padding-left: 20rpx;
          &:before{
            content: '*';
            display: block;
            position: absolute;
            color: #ff3c3c;
            top: 0;
            left: 0;
          }
        }
      }
      .sign-value{
        width: calc(100% - 160rpx);
        font-size: 28rpx;
        color: #21252E;
        font-weight: 500;
        input{
          width: 100%;
          font-weight: 500;
        }
        textarea{
          background-color: #F7F7F7;
          border-radius: 12rpx;
          box-sizing: border-box;
          font-weight: 500;
          width: 100%;
          padding:10rpx;
          height: 150rpx;
        }
      }
    }
  }
  ::v-deep .placeholder-class{
    color: #f65d5d;
    font-weight: normal;
    font-size: 26rpx;
  }
  .sign-tip{
    color: #f65d5d;
    font-weight: normal;
    font-size: 26rpx;
  }
  .check-btn{
	  color: #1677FE;
	  font-size: 28rpx;
	  text-align: right;
	  padding-top: 10rpx;
  }
  .size-img{
	  width: 100%;
	  top: 30%;
	  position: absolute;
  }
  ::v-deep .uni-select{
	border: 1rpx solid red
  }
</style>
